﻿@page "/linear-gauge/axes-and-pointers"

@using Syncfusion.Blazor.LinearGauge
@using Syncfusion.Blazor.DropDowns
@using Syncfusion.Blazor.Inputs
@using Syncfusion.Blazor.Buttons

@inherits SampleBaseComponent;

<SampleDescription>
    <p> This sample illustrates the axis and pointers feature in the linear gauge. Axis and pointers can be customized by using options available in the panel.</p>
</SampleDescription>
<ActionDescription>
   <p>In this example, you can see how to customize the axes and pointers. Use <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.LinearGauge.SfLinearGauge.html#Syncfusion_Blazor_LinearGauge_SfLinearGauge_Format'>
     Format</a></code> of <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.LinearGauge.LinearGaugeAxisLabelStyle.html'>LinearGaugeAxisLabelStyle</a></code> 
     property to customize the <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.LinearGauge.IAxisLabelRenderEventArgs.html'>AxisLabel</a></code> and <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.LinearGauge.LinearGaugePointer.html#Syncfusion_Blazor_LinearGauge_LinearGaugePointer_Type'>Type</a></code>,
     <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.LinearGauge.LinearGaugePointer.html#Syncfusion_Blazor_LinearGauge_LinearGaugePointer_MarkerType'>MarkerType</a></code> and <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.LinearGauge.LinearGaugePointer.html#Syncfusion_Blazor_LinearGauge_LinearGaugePointer_Placement'>
     Placement</a></code> properties to customize the pointers in linear gauge.</p>
   <p>More information about axis and pointers can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/linear-gauge/pointers'>documentation section</a>.</p>
</ActionDescription>


<div class="col-lg-9 control-section sb-property-border">
    <SfLinearGauge Orientation="Orientation.Horizontal" @ref="@Linear">
        <LinearGaugeAxes>
            <LinearGaugeAxis ShowLastLabel="@GaugeLastLabel" Minimum="@GaugeMinimumValue" Maximum="@GaugeMaximumValue" IsInversed="@GaugeInversed" OpposedPosition="@GaugeOpposed">
                <LinearGaugeAxisLabelStyle Offset="@GaugeLabelOffset" Format="@GaugeLabelFormat" />
                <LinearGaugeMajorTicks Color="#9E9E9E" Interval="20" Height="20" />
                <LinearGaugeMinorTicks Color="#9E9E9E" Interval="2" Height="10" />
                <LinearGaugeAnnotations>
                    <LinearGaugeAnnotation AxisIndex="0" AxisValue="@AnnotationAxisvalue" X="10" Y="@AnnotationY" ZIndex="1">
                        <ContentTemplate>
                            <div style='width:70px'><h1 style='font-size:14px;margin-left:-30px;'>@AnnotationText</h1></div>
                        </ContentTemplate>
                    </LinearGaugeAnnotation>
                </LinearGaugeAnnotations>
                <LinearGaugePointers>
                    <LinearGaugePointer Value="@AnnotationAxisvalue" Height="15" Width="15" Placement="@GaugePointerPlacement" Offset="@GaugePointerOffset" MarkerType="@GaugeMarkerType" Type="@GaugePointerType" Color="#757575" />
                </LinearGaugePointers>
            </LinearGaugeAxis>
        </LinearGaugeAxes>
    </SfLinearGauge>
</div>
<div class="col-md-3 property-section">
    <div class="property-panel-section">
        <div class="property-panel-header">Properties</div>
        <div class="property-panel-content">
            <table style="width: 100%;">
                <tr>
                    <td>
                        <div class="textPosition">
                            Axis Minimum
                            <span class="value">@MinimumValueText</span>
                        </div>
                    </td>
                    <td>
                        <div class="textPosition">
                            <input type="range" value="@MinimumValue" min="0" max="100" @onchange="MinimumChange" />
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div class="textPosition">
                            Axis Maximum
                            <span class="value">@MaximumValueText</span>
                        </div>
                    </td>
                    <td>
                        <div class="textPosition">
                            <input type="range" value="@MaximumValue" min="0" max="100" @onchange="MaximumChange" />
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div class="textPosition">Axis Inversed</div>
                    </td>
                    <td>
                        <div class="textPosition">
                            <SfCheckBox Checked="@InveredChecked" ValueChange="@InversedChange" TChecked="bool"/>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div class="textPosition">Axis Opposed</div>
                    </td>
                    <td>
                        <div class="textPosition">
                            <SfCheckBox Checked="@OpposedChecked" ValueChange="@OpposedChange" TChecked="bool"/>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div class="textPosition">Show Last Label</div>
                    </td>
                    <td>
                        <div class="textPosition">
                            <SfCheckBox Checked="@LastLabelChecked" ValueChange="@LastLabelChange" TChecked="bool"/>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div class="textPosition">Label Format</div>
                    </td>
                    <td>
                        <div class="e-float-input">
                            <SfTextBox Value="@LabelFormatValue" ValueChange="@LabelFormatChange"/>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div class="textPosition">Pointer type</div>
                    </td>
                    <td>
                        <div class="textPosition">
                            <SfDropDownList DataSource="@PointerTypeList" @bind-Value="@PointerTypeValue" Placeholder="Select Range Bar Color">
                                <DropDownListEvents TItem="DropDownData" ValueChange="PointerTypeChange" TValue="string"/>
                                <DropDownListFieldSettings text="Name" value="Name"/>
                            </SfDropDownList>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div class="textPosition">Marker Placement</div>
                    </td>
                    <td>
                        <div class="textPosition">
                            <SfDropDownList Enabled="@PlacementListEnable" DataSource="@PointerPlacementList" Value="@PlacementValue">
                                <DropDownListEvents TItem="DropDownData" ValueChange="PlacementTypeChange" TValue="string"/>
                                <DropDownListFieldSettings text="Name" value="Name"/>
                            </SfDropDownList>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</div>
<style>
    .value{
        margin-left:10px;
    }
    tr {
        height: 40px;
    }
    td {
        width:50%
    }
    .textPosition {
        padding-left: 10px;
        padding-top: 10px;
    }
</style>
@code {
    private string GaugePointerOffset = "30";
    private double GaugeLabelOffset = 48;
    private double GaugeMaximumValue = 115;
    private double GaugeMinimumValue = 0;
    private bool GaugeInversed = false;
    private bool GaugeLastLabel = false;
    private bool GaugeOpposed = false;
    private string GaugeLabelFormat = "{value}";
    private MarkerType GaugeMarkerType = MarkerType.InvertedTriangle;
    private Syncfusion.Blazor.LinearGauge.Placement GaugePointerPlacement = Syncfusion.Blazor.LinearGauge.Placement.Far;
    private Point GaugePointerType = Point.Marker;
    public string AnnotationText = "20 MPH";
    private double AnnotationAxisvalue = 20;
    private double MinimumValue = 0;
    private double MaximumValue = 115;
    private double MinimumValueText = 0;
    private double MaximumValueText = 115;
    private bool InveredChecked = false;
    private bool LastLabelChecked = false;
    private bool OpposedChecked = false;
    private string LabelFormatValue = "{value}";
    private string PointerTypeValue = "Marker";
    private string PlacementValue = "Far";
    private bool PlacementListEnable = true;
    private double AnnotationY = 35;
    SfLinearGauge Linear;
    public class DropDownData {
        public string Name { get; set; }
    }
    private List<DropDownData> PointerTypeList = new List<DropDownData> {
        new DropDownData{ Name = "Marker"},
        new DropDownData{ Name = "Bar"},
    };
    private List<DropDownData> PointerPlacementList = new List<DropDownData> {
        new DropDownData{ Name = "Far"},
        new DropDownData{ Name = "Near"},
        new DropDownData{ Name = "Center"},
    };
    private void MinimumChange(Microsoft.AspNetCore.Components.ChangeEventArgs args) {
        MinimumValue = Convert.ToDouble(args.Value);
        GaugeMinimumValue = MinimumValueText = MinimumValue;
        AnnotationAxisvalue = (Math.Min(MinimumValue, MaximumValue)) > 20 ? Math.Min(MinimumValue, MaximumValue) : 20;
        AnnotationText = (AnnotationAxisvalue + " MPH").ToString();
        GaugeMaximumValue = MaximumValue;
    }
    private void MaximumChange(Microsoft.AspNetCore.Components.ChangeEventArgs args) {
        MaximumValue = Convert.ToDouble(args.Value);
        GaugeMinimumValue = MinimumValue;
        AnnotationAxisvalue = (Math.Min(MinimumValue, MaximumValue)) > 20 ? Math.Min(MinimumValue, MaximumValue) : 20;
        AnnotationText = (AnnotationAxisvalue + " MPH").ToString();
        GaugeMaximumValue = MaximumValueText = MaximumValue;
    }
    private void InversedChange(Syncfusion.Blazor.Buttons.ChangeEventArgs<bool> args) {
        InveredChecked = GaugeInversed = args.Checked;
    }
    private void LastLabelChange(Syncfusion.Blazor.Buttons.ChangeEventArgs<bool> args) {
        LastLabelChecked = GaugeLastLabel = args.Checked;
    }
    private void OpposedChange(Syncfusion.Blazor.Buttons.ChangeEventArgs<bool> args) {
        OpposedChecked = GaugeOpposed = args.Checked;
        if (OpposedChecked) {
            GaugePointerPlacement = Syncfusion.Blazor.LinearGauge.Placement.Near;
            GaugeMarkerType = MarkerType.Triangle;
            GaugePointerOffset = "-20";
            GaugeLabelOffset = 0;
            AnnotationY = -75;
        }
        else {
            GaugePointerPlacement = Syncfusion.Blazor.LinearGauge.Placement.Far;
            GaugeMarkerType = MarkerType.InvertedTriangle;
            GaugePointerOffset = "30";
            GaugeLabelOffset = 50;
            AnnotationY = 35;
        }
    }
    private void LabelFormatChange(ChangedEventArgs args) {
        LabelFormatValue = (args.Value).ToString();
        GaugeLabelFormat = LabelFormatValue;
    }
    private void PointerTypeChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, DropDownData> args) {
        PointerTypeValue = (args.Value).ToString();
        if (PointerTypeValue == "Marker") { GaugePointerType = Point.Marker; PlacementListEnable = true; }
        else { GaugePointerType = Point.Bar; PlacementListEnable = false; }
    }
    private void PlacementTypeChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, DropDownData> args) {
        PlacementValue = (args.Value).ToString();
        if (PlacementValue == "Far") { GaugePointerPlacement = Syncfusion.Blazor.LinearGauge.Placement.Far; }
        else if (PlacementValue == "Near") { GaugePointerPlacement = Syncfusion.Blazor.LinearGauge.Placement.Near; }
        else { GaugePointerPlacement = Syncfusion.Blazor.LinearGauge.Placement.Center; }
    }
}
